import React from "react"
import Svg, {Path} from "react-native-svg"

interface IconProps {
  size?: number
  color?: string
}

export const UserIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M20 21C20 18.7909 18.7909 16.7909 17 15.5C15.2091 14.2091 13 13 12 13C11 13 8.79086 14.2091 7 15.5C5.20914 16.7909 4 18.7909 4 21"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
)

export const CalendarIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M16 2V6"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M8 2V6"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M3 10H21"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
)

export const LocationIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <Path
      d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
)

export const ArrowDownIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      d="M6 9L12 15L18 9"
      stroke={color}
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </Svg>
)

export const LeftArrowIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      stroke={color}
      d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
      p-id="5148"
    />
  </Svg>
)
export const RightArrowIcon = ({size = 24, color = "#000"}: IconProps) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      stroke={color}
      d="M236.552013 926.853955a55.805997 55.805997 0 0 0 0 80.454996 59.682997 59.682997 0 0 0 82.794996 0l468.099978-455.081978a55.805997 55.805997 0 0 0 0-80.453996L319.348009 16.689999a59.682997 59.682997 0 0 0-82.794996 0 55.805997 55.805997 0 0 0 0 80.454996L663.401993 511.999975 236.624013 926.853955z"
      p-id="6130"
    />
  </Svg>
)

// SVG心形icon
export const HeartIcon = ({size = 32, color = "#fff"}) => (
  <Svg width={size} height={size} viewBox="0 0 48 48" fill="none">
    <Path
      d="M24 42s-13.2-10.8-16.8-16.2C3.2 22.2 2 19.2 2 16.2 2 9.6 7.6 4 14.2 4c3.6 0 7 1.8 9.1 4.7C25.8 5.8 29.2 4 32.8 4 39.4 4 45 9.6 45 16.2c0 3-1.2 6-5.2 9.6C37.2 31.2 24 42 24 42z"
      stroke={color}
      strokeWidth="3"
      strokeLinejoin="round"
      fill="none"
    />
  </Svg>
)

// SVG心碎icon
export const BrokenHeartIcon = ({size = 32, color = "#FF5B5B"}) => (
  <Svg width={size} height={size} viewBox="0 0 48 48" fill="none">
    <Path
      d="M24 42s-13.2-10.8-16.8-16.2C3.2 22.2 2 19.2 2 16.2 2 9.6 7.6 4 14.2 4c3.6 0 7 1.8 9.1 4.7C25.8 5.8 29.2 4 32.8 4 39.4 4 45 9.6 45 16.2c0 3-1.2 6-5.2 9.6C37.2 31.2 24 42 24 42z"
      stroke={color}
      strokeWidth="3"
      strokeLinejoin="round"
      fill="none"
    />
    <Path d="M19 18l4 6-5 7 7-4-4-6 5-7-7 4z" fill={color} opacity="0.5" />
  </Svg>
)
